<!DOCTYPE html>
<html>

<head>
    <title>LinkHorizontalVertical</title>
    <script src="d3.min.js"></script>
</head>

<body>
    <svg width="2200" height="1200" id="mainsvg" class="svgs" style="display: block; margin: auto;"></svg>
    <script>
        const svg = d3.select('#mainsvg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');
        const data1 = {'source': {'x': 100, 'y': 100}, 'target': {'x': 600, 'y': 900}};
        const data2 = {'source': {'x': 100, 'y': 100}, 'target': {'x': 900, 'y': 600}};
        const pathH = d3.linkHorizontal().x(d => d.x).y(d => d.y);
        const pathV = d3.linkVertical().x(d => d.x).y(d => d.y);
        svg.append('path').attr('d', pathH(data1)).attr('stroke', 'steelblue');
        svg.append('path').attr('d', pathV(data1)).attr('stroke', 'green');
        svg.append('path').attr('d', pathH(data2)).attr('stroke', 'steelblue');
        svg.append('path').attr('d', pathV(data2)).attr('stroke', 'green');

        console.log(pathH(data1));

        svg.selectAll('path').attr('fill', 'none')
        .attr('stroke-width', '5')

        svg.append('rect').attr('y', '100').attr('fill', 'green')
        svg.append('text').attr('y', '125').text('LinkVertical')
        svg.append('rect').attr('y', '160').attr('fill', 'steelblue')
        svg.append('text').attr('y', '185').text('LinkHorizontal')

        svg.selectAll('rect').attr('x', '900').attr('width', 100).attr('height', 50);
        svg.selectAll('text').attr('x', '1020').attr('font-size', '2em')
        .attr('dominant-baseline', 'central');
        

    </script>
</body>

</html>